<template>
	<view>
		<div class="video-play" v-if="videoPreviewModalIsShow" @click="videoPreviewModalIsShow=false">
			<video :src="currentVideo" style="width: 100%;" @click.stop="videoPreviewModalIsShow=true"></video>
		</div>

		<div class="file-list">
			<div class="pic" v-for="(itemPath,index) in files">
				<image v-if="itemPath.indexOf('mp4')==-1" :src="ossPath+itemPath" @click="preview(itemPath)"
					mode="widthFix" style="width: 100%;"></image>

				<image v-if="itemPath.indexOf('mp4')!=-1" src="/static/icon/play.png" @click="play(index)" class="play" mode="widthFix"
					style="width: 35rpx;"></image>

				<image v-if="!detail" src="/static/icon/del2.png" @click="del(index)" class="del" mode="widthFix"
					style="width: 35rpx;"></image>
			</div>

			<div class="add pic" @click="upload" v-if="files.length<maxCount&&!detail">
				<image src="/static/icon/add.png" mode="widthFix"></image>
			</div>

		</div>
	</view>
</template>

<script>
	export default {
		props: ["files", "fileType", "maxCount", "detail"],
		data() {
			return {
				videoPreviewModalIsShow: false,
				currentVideo: "",
				ossPath: "https://gluz-oss.oss-cn-beijing.aliyuncs.com"
			}
		},
		created() {

		},
		methods: {
			close() {

			},
			play(index) {
				this.videoPreviewModalIsShow = true;
				this.currentVideo = this.ossPath + this.files[index]
			},
			preview(path) {
				path = this.ossPath + path
				uni.previewImage({
					urls: [path],
					current: path
				})
			},
			del(index) {
				uni.showModal({
					title: this.$t('确认删除'),
					content: this.$t('是否确认删除当前文件'),
					confirmText: this.$t('确认'),
					cancelText: this.$t('取消'),
					success: e => {
						if (e.confirm) {
							const filesTemp = this.files;
							filesTemp.splice(index, 1)
							this.$emit("update:files", filesTemp)
						}
					}
				})
			},
			upload() {
				if (this.fileType != "video") {
					uni.chooseImage({
						count: 1,
						success: (chooseImageRes) => {
							const tempFilePath = chooseImageRes.tempFilePaths[0];
							// 定义最大文件大小：10MB = 10 * 1024 * 1024 字节
							const MAX_SIZE = 10 * 1024 * 1024;
							// 获取图片文件信息，检查文件大小
							uni.getFileInfo({
								filePath: tempFilePath,
								success: (res) => {
									if (res.size > MAX_SIZE) {
										// 如果文件大小超过10MB，显示提示
										uni.showToast({
											title: this.$t('图片大小不能超过10MB'),
											icon: 'none'
										});
										return; // 阻止继续执行上传操作
									}
					
									// 文件大小符合要求，继续执行上传
									this.submit(tempFilePath);
								},
								fail: () => {
									uni.showToast({
										title: '获取文件信息失败',
										icon: 'none'
									});
								}
							});
						}
					});
				} else {
					uni.chooseVideo({
						type: 'video',
						count: 1,
						compressed: true,
						success: (res) => {
							const tempFilePath = res.tempFilePath;
							const MAX_SIZE = 10 * 1024 * 1024; // 10MB
							uni.getFileInfo({
								filePath: tempFilePath,
								success: (fileInfo) => {
									if (fileInfo.size > MAX_SIZE) {
										uni.showToast({
											title: this.$t('视频文件大小不能超过10MB'),
											icon: 'none'
										});
										return; // 阻止继续执行上传操作
									}
									this.submit(tempFilePath);
								},
								fail: (error) => {
									uni.showToast({
										title: this.$t('获取文件信息失败'),
										icon: 'none'
									});
								}
							});
						}
					});
				}
			},
			submit(tempFilePaths) {
				uni.uploadFile({
					url: 'https://app.gluz.com.cn/api/common/upload',
					filePath: tempFilePaths,
					name: 'file',
					formData: {},
					success: (uploadFileRes) => {
						try {
							const updatedOssPath = JSON.parse(uploadFileRes.data).data.url
							const filesTemp = this.files;
							filesTemp.push(updatedOssPath)
							this.$emit("update:files", filesTemp)
						} catch (e) {
							uni.showToast({
								title: this.$t("上传失败"),
								icon: "none"
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.file-list {
		display: flex;
		margin-bottom: 20rpx;
		flex-wrap: wrap;

		.pic {
			width: 130rpx;
			height: 130rpx;
			background-color: #F6F7FB;
			border-radius: 12rpx;
			margin-right: 16rpx;
			position: relative;
			margin-bottom: 16rpx;
			image{
				max-width: 100%;
				max-height: 100%;
				border-radius: 12rpx;
			}

			.del {
				position: absolute;
				right: 5rpx;
				top: 5rpx;
			}

			.play {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%, -50%, 0);
			}
		}

		.add {
			box-sizing: border-box;
			padding: 40rpx;

			&:active {
				background: #eee;
			}

			image {
				width: 100%;
			}
		}
	}

	.video-play {
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9;
	}

	.close {}
</style>